<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="home">
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="false">
				<swiper-item v-for="(item,index) in bannerList" :key="index"
					:style="{'background-image':'url('+item.imageUrl+')'}">
					<view class="swiper-item">
						<view class="swiper-item-title">
							<view class="swiper-item-title-text">
								<p>{{item.title}} </p>{{item.updateTime}}
							</view>
							<view class="swiper-item-title-icon">
								<uni-icons type="map-filled" size="30" color="#d0d5d0" @click="goMap"></uni-icons>
							</view>
						</view>
						<view class="swiper-item-bottom">
							<view class="swiper-item-bottom-text">
								尼泊尔北临中国，西、南、东三面与印度接壤。国土面积147,516平方公里。
							</view>
							<view class="swiper-item-bottom-icon">
								<uni-icons type="right" size="30" color="#fff" @click="goCountryDetails"></uni-icons>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 轮播图·END -->
		<view class="title">
			出国前为你提供规划旅行行程的实用资讯
		</view>
		<!-- 卡片 -->
		<view class="content">
			<view class="card">
				<view class="uni-section">
					<view class="card-item" padding="0" spacing="0">
						<view class="custom-cover" v-for="(item,index) in cardList" :key="index"
							:style="{'background-image':'url('+item.imageUrl+')'}">
							<view class="top" :data-cardid="item.id" @click="goServiceDetails">
								<view class="top-text">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reqGetBannerList,
		reqGetCardList
	} from '../../api/index.js';

	export default {
		data() {
			return {
				bannerList: [], //轮播图
				cardList: [] //卡片图
			}
		},
		mounted() {
			this.getBannerList();
			this.getCardList();
		},
		methods: {
			// 轮播图
			async getBannerList() {
				const result = await reqGetBannerList();
				if (result.code === 200) {
					this.bannerList = result.data;
				} else {
					console.log('获取bannerList出错');
				}
			},
			// 卡片
			async getCardList() {
				const result = await reqGetCardList();
				if (result.code === 200) {
					this.cardList = result.data;
				} else {
					console.log('获取card出错')
				}
			},
			// 去 国家详情
			goCountryDetails() {
				uni.navigateTo({
					url: '/pages/index/countryDetails/index'
				})
			},
			// 去 地图
			goMap() {
				uni.navigateTo({
					url: '/pages/index/map/index'
				})
			},
			// 去 服务详情
			goServiceDetails(event) {
				const {
					cardid
				} = event.currentTarget.dataset;
				uni.navigateTo({
					url: `/pages/index/serviceDetails/index?cardid=${cardid}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		height: 100%;

		// 轮播图
		.uni-margin-wrap {
			.swiper {
				height: 350rpx;

				.swiper-item {
					height: 300rpx;
					background-size: 100%, 100%;
					background-image: linear-gradient(to bottom,
							rgba(255, 255, 255, 0.0),
							rgba(0, 0, 0, 0.7));
					color: white;
					padding: 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.swiper-item-title {
						display: flex;
						justify-content: space-between;

						p {
							font-size: 50rpx;
						}
					}

					.swiper-item-bottom {
						display: flex;
					}
				}
			}
		}

		.title {
			margin-top: 4px;
			font-size: 26rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background-color: #eee;
		}

		// 卡片
		.content {
			.card {
				padding: 20rpx;

				.uni-section {
					// display: flex;

					.card-item {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						margin: 30rpx;

						// height: 300rpx;
						.custom-cover {
							border: 4rpx solid #22b589;
							height: 200rpx;
							width: 300rpx;
							margin-top: 20rpx;

							background-size: 300rpx;

							.top {
								width: 100%;
								height: 100%;
								background-color: rgba($color: #000000, $alpha: 0.5);
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;

								.top-text {
									color: white;
									max-width: 280rpx;
									text-overflow: ellipsis;
									overflow: hidden;
									word-break: break-all;
									white-space: nowrap;
								}
							}
						}
					}
				}
			}
		}
	}
</style>